/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import { Radio, Spin, Button } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import qs from 'qs';
import Cookies from 'js-cookie';
import { If } from 'babel-plugin-jsx-control-statements';
import Pending from '@/components/admin-todo-details/pending';
import OverTiming from '@/components/admin-todo-details/overTiming';
import OverTimed from '@/components/admin-todo-details/overTimed';
import Handled from '@/components/admin-todo-details/handled';
import Returned from '@/components/admin-todo-details/returned';
import RequestApi from '@/utils/request';
import css from './index.scss';

/**
 * @description 待办中心
 * 				待处理
 * 				即将过期处理
 * 				过期处理
 * 				已处理
 * 				已退回
 */
export default () => {
	const distinctId = Cookies.get('distinctId');
	const history = useHistory();
	const search = qs.parse(history.location.search, { ignoreQueryPrefix: true });
	const { name, index, stage } = search;
	const [values, setValues] = useState(index);
	const handleModeChange = (e) => {
		setValues(e.target.value);
	};
	const [count, setCount] = useState();
	const [loading, setLoading] = useState(true);
	useEffect(() => {
		RequestApi.connection('get', `parkLotRecordTask/getAgentCenterInfo/${distinctId}`).then((response) => {
			setLoading(false);
			setCount(response.data);
		});
	}, []);
	const back = () => {
		history.goBack(-1);
	};
	return (
		<If condition={count !== undefined}>
			<div className={css.app}>
				<h1>
					<Button type="link" style={{ color: 'black' }} onClick={back}>
						<ArrowLeftOutlined />
					</Button>
					{name}
				</h1>
				<Spin spinning={loading}>
					<Radio.Group onChange={handleModeChange} defaultValue={index} buttonStyle="solid" style={{ marginTop: 16 }}>
						<Radio.Button value="1">
							待处理
							{count[stage].pending}
						</Radio.Button>
						<Radio.Button value="2">
							即将过期处理
							{count[stage].overTiming}
						</Radio.Button>
						<Radio.Button value="3">
							过期处理
							{count[stage].overTimed}
						</Radio.Button>
						<Radio.Button value="4">
							已处理
							{count[stage].handled}
						</Radio.Button>
						<Radio.Button value="5">
							已退回
							{count[stage].returned}
						</Radio.Button>
					</Radio.Group>
					<div className={css.content}>
						{/* 选择不同的板块，并将该板块的index传给子组件 */}
						<If condition={values === '1'}>
							<Pending index="1" />
						</If>
						<If condition={values === '2'}>
							<OverTiming index="2" />
						</If>
						<If condition={values === '3'}>
							<OverTimed index="3" />
						</If>
						<If condition={values === '4'}>
							<Handled index="4" />
						</If>
						<If condition={values === '5'}>
							<Returned index="5" />
						</If>
					</div>
				</Spin>
			</div>
		</If>
	);
};
